<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel='stylesheet' href='stylesheets/style.css' />
    <link rel="stylesheet" type="text/css" href="stylesheets/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="stylesheets/themes/icon.css">
    <script type="text/javascript" src="javascripts/jquery.min.js"></script>
    <script type="text/javascript" src="/javascripts/jquery.easyui.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>
    <title>Document</title>
    <style>
    body {
        padding: 0;
        margin: 0;
    }
    </style>
</head>

<body>

    <table id="dg">
    <input id="ss"></input>
        
    </table>

    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:'true'" style="width:400px;height:195px;padding:10px">
        <form id="ff" method="get">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="_id" style="width:100%">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'Password:',required:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
    <script>
       
     $('#dg').datagrid({
        url: 'http://localhost:3000/comment/list',
        pagination: true,
        columns: [
            [
                { field: 'title', title: 'Title', width: 100 },
                { field: 'comment', title: 'Comment', width: 100 },
                {
                    field: '_id',
                    title: '操作',
                    width: 80,
                    formatter: function(value, row, index) {
                        return '<a href="#" onclick="deleteRow(\'' + value + '\')">删除</a>  <a href="#" onclick="editRow(\'' + value + '\')">修改</a>'
                    }
                }
            ]
        ],
        toolbar: [{
            text: 'Add',
            iconCls: 'icon-add',
            handler: function() {
                $('#dlg').dialog('open');
                $('#ff').form('clear');

            }
        }, {
            text: 'Cut',
            iconCls: 'icon-cut',
            handler: function() { alert('cut') }
        }, '-', {
            text: 'Save',
            iconCls: 'icon-save',
            handler: function() { alert('save') }
        }]
    });

    function deleteRow(id) {
        $.messager.confirm('delete the warning', 'Are you confirm delete this?', function(r) {
            if (r) {
                $.ajax({
                    url: 'http://localhost:3000/comment/data/' + id,
                    method: 'delete'
                }).done(function() {
                    $('#dg').datagrid('reload');
                })
            }
        });

    }

    function editRow(id) {
        $.ajax({
            url: 'http://localhost:3000/comment/data/' + id,
            method: 'get'
        }).done(function(res) {
            console.log(res)
            $('#dlg').dialog('open')
            $('#ff').form('load', res);
        })

    }

    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                var formData = $('#ff').serializeJSON();
                if ($(this).form('enableValidation').form('validate')) {
                    if (formData._id.trim().length > 0) {
                        $.ajax({
                            url: 'http://localhost:3000/comment/data/'+formData._id,
                            method: 'put',
                            data: formData
                        }).done(function() {
                            $('#dg').datagrid('reload');
                            $('#dlg').dialog('close')
                        })
                    } else {
                        delete formData._id;
                        console.log($('#ff').serializeJSON())
                        $.ajax({
                            url: 'http://localhost:3000/comment/data',
                            method: 'post',
                            data: formData
                        }).done(function() {
                            $('#dg').datagrid('reload');
                            $('#dlg').dialog('close')
                        })
                    }
                } else {
                }
            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    }
        
    $('#ss').searchbox({
    searcher:function(value,name){
        $('#dg').datagrid({
        url: 'http://localhost:3000/comment/list/search/'+value,
        pagination: true,
        columns: [
            [
                { field: 'title', title: 'Title', width: 100 },
                { field: 'comment', title: 'Comment', width: 100 },
                {
                    field: '_id',
                    title: '操作',
                    width: 80,
                    formatter: function(value, row, index) {
                        return '<a href="#" onclick="deleteRow(\'' + value + '\')">删除</a>  <a href="#" onclick="editRow(\'' + value + '\')">修改</a>'
                    }
                }
            ]
        ],
        toolbar: [{
            text: 'Add',
            iconCls: 'icon-add',
            handler: function() {
                $('#dlg').dialog('open');
                $('#ff').form('clear');

            }
        }, {
            text: 'Cut',
            iconCls: 'icon-cut',
            handler: function() { alert('cut') }
        }, '-', {
            text: 'Save',
            iconCls: 'icon-save',
            handler: function() { alert('save') }
        }]
    });
    },
    prompt:'搜索评论内容'
});
    </script>
</body>

</html>